<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分片</title>
</head>

<body>
    <div id="container">

    </div>
    <script>
        let total = 100000
        let index = 0 //偏移量
        let id = 0 //递增的内容

        function load() {
            index += 50
            if (index < total) {
                //setTimeout 是一个宏任务 requestAnimationFrame也是一个宏任务 可以配合浏览器的刷新频率
                setTimeout(() => {
                    //分片渲染 
                    //因为定时器是一个宏任务
                    //会等待UI渲染完成后执行
                    //先渲染50个，渲染完毕之后 ，再渲染50个
                    //问题是dom都在页面上还是会卡顿
                    for (let i = 0; i < 50; i++) {
                        let li = document.createElement("li")
                        li.innerHTML = id++;
                        container.appendChild(li)
                    }
                }, 0)
                load()
            }
        }
        load()
        //新版本浏览器的优化 当js执行完成之后一并插入到页面中
        // let timer = Date.now()
        // for (let i = 0; i < total; i++) {
        //     let li = document.createElement("li")
        //     li.innerHTML = i
        //     container.appendChild(li)
        // }
        // console.log('js',Date.now() - timer) //算的是执行时间
        // setTimeout(() => {
        //     console.log('js+dom',Date.now() - timer)
        // }, 0);

        // 分片 我们可以根据数据大小划分 每次加载固定的数量
    </script>
</body>

</html>